<template>
  <div class="app-container">
    <el-descriptions class="margin-top" :title="t('payment.payResult')" :column="1" border>
      <el-descriptions-item :label="t('payment.tradeNo')">
        {{ payResult.TradeNo }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            {{ t("payment.payAmount") }}
          </div>
        </template>
        {{ payResult.TradeAmt }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            {{ t("payment.payType") }}
          </div>
        </template>
        {{ payResult.PaymentType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            {{ t("payment.tradeStatus") }}
          </div>
        </template>

        <el-tag size="small">{{ payResult.RtnMsg }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            {{ t("payment.payTime") }}
          </div>
        </template>
        {{ payResult.PaymentDate }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref } from "vue";
defineOptions({
  name: "Customer",
  inheritAttrs: false,
});

const { t } = useI18n();

import OrderAPI, { OrderPageVO, OrderQuery, OrderVO } from "@/api/order";

const route = useRoute();
const orderNum = route.params.id as string;
const payResult = reactive<any>({
  PaymentType: "",
  PaymentDate: "",
  RtnCode: "",
  RtnMsg: "",
  TradeNo: "",
  TradeAmt: "",
  TradeDate: "",
});

const paymentData = reactive<any>({
  PaymentUrl: "",
  MerchantID: "",
  MerchantTradeNo: "",
  MerchantTradeDate: "",
  PaymentType: "",
  TotalAmount: 0,
  TradeDesc: "",
  ItemName: "",
  ReturnURL: "",
  ChoosePayment: "",
  ClientBackURL: "",
  OrderResultURL: "",
});

function showPayResult() {
  if (orderNum != null) {
    OrderAPI.getPayResult(orderNum).then((res) => {
      console.log(res);
      if (res != null) {
        Object.assign(payResult, res);
      }
    });
  }
}

onMounted(() => {
  showPayResult();
});
</script>
